<!-- 此组件为首页echart环形图的组件 -->
<template>
  <el-card class="box-card">
    <template #header>
      <span>{{ headerText }}</span>
    </template>
    <div ref="main" style="width: 100%;height:300px;"></div>
  </el-card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'RingchartsCard'
})
</script> 
<script setup lang="ts">
import { onMounted,ref } from 'vue';
import * as echarts from 'echarts';
const main = ref()
const init = () => {
  var myChart = echarts.init(main.value);
  var option = {
    title: {
      show: true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
      text: `共${props.ringCharts.normal+props.ringCharts.CRankWarning+props.ringCharts.DRankWarning+props.ringCharts.offLine}台设备`,//主标题文本，'\n'指定换行
      x: 'center',
      y: 'center',
      textStyle:{
        fontSize: 12
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      y: 'center',    //延Y轴居中
      x: 'right', //居右显示
      orient: 'vertical',
      align: 'left',//文字显示右侧
    },
    series: [
      {
        name: '设备当前状态统计',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: 'inside',
          position: 'Right'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true
        },
        data: [
          { value: props.ringCharts.normal, name: '正常运转' },
          { value: props.ringCharts.CRankWarning, name: 'C级报警' },
          { value: props.ringCharts.DRankWarning, name: 'D级报警' },
          { value: props.ringCharts.offLine, name: '离线报警' ,
itemStyle:{color:'#eee'}},
        ]
      }
    ]
  }
  option && myChart.setOption(option);
  window.addEventListener("resize",function() {
    myChart.resize();
});
}
onMounted(() => {
  init()
})

let props = defineProps(['headerText', 'ringCharts'])
</script>
<style lang="less" scoped>
.box-card {
  width: 49%;
}
</style>